<template>
  <el-checkbox-group v-if="multiple" v-model="fieldConfig.defaultValue" class="ep-options" size="default">
    <div v-for="(r, i) in fieldConfig.optionItems" :key="i" ref="optionItemsRef" class="ep-options__item">
      <el-checkbox :label="r.value" :value="r.value" :disabled="r.disabled">
        <div class="ep-options__item-label">
          <el-icon><CaretBottom /></el-icon>
          <span>{{ r.label }}</span>
        </div>
      </el-checkbox>
      <div class="ep-options__item-actions">
        <el-icon class="btn" :size="16" @click="editOption(r, i)"><Edit /></el-icon>
        <el-icon class="btn" :size="16" @click="deleteOption(i)"><Delete /></el-icon>
      </div>
    </div>

    <el-button icon="CirclePlus" plain @click="addOption">添加一项</el-button>
  </el-checkbox-group>
  <el-radio-group v-else v-model="fieldConfig.defaultValue" class="ep-options" size="default">
    <div v-for="(r, i) in fieldConfig.optionItems" :key="i" ref="optionItemsRef" class="ep-options__item">
      <el-radio :label="r.value" :value="r.value" :disabled="r.disabled" @click="clickOption(r)">
        <div class="ep-options__item-label">
          <el-icon><CaretBottom /></el-icon>
          <span>{{ r.label }}</span>
        </div>
      </el-radio>
      <div class="ep-options__item-actions">
        <el-icon class="btn" :size="16" @click="editOption(r, i)"><Edit /></el-icon>
        <el-icon class="btn" :size="16" @click="deleteOption(i)"><Delete /></el-icon>
      </div>
    </div>

    <el-button icon="CirclePlus" plain @click="addOption">添加一项</el-button>
  </el-radio-group>
  <el-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    placement="right-start"
    width="280"
    virtual-triggering
  >
    <div style="padding: 16px 10px 10px 10px">
      <el-form-item label="显示值" label-width="55px">
        <el-input v-model="selectedItem.label" />
      </el-form-item>
      <el-form-item label="选项值" label-width="55px">
        <el-input v-model="selectedItem.value" />
      </el-form-item>
    </div>
    <el-icon class="ep-popover-close" @click="popoverClose"><Close /></el-icon>
  </el-popover>
</template>

<script setup>
import { ref, toRefs, getCurrentInstance } from 'vue'
import propsDefinition from './options/props'
const props = defineProps({
  ...propsDefinition,
  multiple: { type: Boolean, default: false }
})
const { selected, fieldConfig, formConfig } = toRefs(props)
const { proxy } = getCurrentInstance()

const selectedItem = ref({ label: '', value: '' })
const optionItemsRef = ref()
const buttonRef = ref()
const popoverRef = ref()

const clickOption = (option) => {
  if (fieldConfig.value.defaultValue === option.value) {
    setTimeout(() => {
      fieldConfig.value.defaultValue = ''
    }, 100)
  }
}

const deleteOption = (index) => {
  if (fieldConfig.value.optionItems && fieldConfig.value.optionItems.length <= 2) {
    return proxy.$message.error('至少要保留两个选项.')
  }
  fieldConfig.value.optionItems.splice(index, 1)
}

const addOption = () => {
  if (fieldConfig.value.optionItems && fieldConfig.value.optionItems.length < 30) {
    fieldConfig.value.optionItems.push({ label: '新选项', value: '新选项' })
  }
}

const editOption = (option, i) => {
  popoverRef.value.hide()
  selectedItem.value = option
  buttonRef.value = optionItemsRef.value[i]
}

const popoverClose = () => {
  popoverRef.value.hide()
}
</script>

<style lang="scss" scoped>
.ep-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 18px;

  .ep-options__item {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ep-options__item-label {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #606266;
      span {
        margin-left: 4px;
      }
    }

    .ep-options__item-actions {
      display: flex;
      align-items: center;
      cursor: pointer;

      .el-icon {
        color: #909399;
        margin-left: 10px;
      }
    }
    &:hover {
      border-color: #409eff;

      .btn {
        color: #409eff;
      }
    }

    :deep(.el-radio) {
      height: 28px !important;
    }
  }
}
.ep-popover-close {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
  opacity: 0.6;
  &:hover {
    opacity: 1;
  }
}
</style>
